<template>
  <div class="dashboard-editor-container">
    <el-row class="date-btn" style="height: 50px;">
      <el-col :lg="24">
        <div class="fl">
          <span style="line-height: 35px;text-align: left;padding:0 10px;color: #666">查询方式:</span>
          <el-button plain type="primary" @click="getTime('01')">当日</el-button>
          <el-button plain type="primary" @click="getTime('02')">本周</el-button>
          <el-button plain type="primary" @click="getTime('03')">本月</el-button>
          <el-button plain type="primary">自定义</el-button>
        </div>
        <div class="fl" style="margin-left: 20px;">
          <div v-show="diyTime">
            <span class="demonstration"></span>
            <el-date-picker v-model="selectedTime"
                            type="datetimerange"
                            size="small"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="timeChange">
            </el-date-picker>
          </div>
        </div>
        <div class="fl demo-input-suffix" style="margin-left: 1%">
          <span style="color: #666">刷新时间(s)：</span>
          <el-input style="width: 90px"
                    placeholder="刷新时间"
                    v-model="timeDelay"
                    @keyup.enter.native="reSetInterval"
                    @blur="reSetInterval" />
        </div>
      </el-col>
      <el-col :xs="8" :sm="12" :lg="9">
      </el-col>
    </el-row>
    <el-row :gutter="40" class="panel-group" v-loading="listLoadingPanel">
      <el-col :xs="24" :sm="12" :lg="12" class="card-panel-col">
        <div class="card-panel">
          <el-row :gutter="40">
            <el-col :span="8">
              <svg-icon icon-class="play" class-name="card-panel-icon" />
            </el-col>
            <el-col :span="16" class="title">
              <div>成功播放</div>
              <div class="number">
                <count-to :start-val="0" :end-val="adData.playSuccess" :duration="1000" class="card-panel-num" />
                <span class="unit">次</span>
              </div>
              <div class="sub-title">
                成功率<span style="color: #00a0dc">&nbsp{{successRate.toFixed(2)}}%</span>&nbsp/&nbsp失败次数<span style="color: red">&nbsp{{adData.playFail}}&nbsp</span>次
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="12" class="card-panel-col">
        <div class="card-panel">
          <el-row :gutter="40">
            <el-col :span="8">
              <svg-icon icon-class="active" class-name="card-panel-icon" />
            </el-col>
            <el-col :span="16" class="title">
              <div>活跃媒体</div>
              <div class="number">
                <count-to :start-val="0" :end-val="adData.active" :duration="1000" class="card-panel-num" />
                <span class="unit">台</span>
              </div>
              <div class="sub-title">本月活跃媒体<span style="color: #00a0dc">&nbsp{{adData.monthActive}}</span>&nbsp台</div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="12" class="card-panel-col">
        <div class="card-panel">
          <el-row :gutter="40">
            <el-col :span="8">
              <svg-icon icon-class="picture" class-name="card-panel-icon" />
            </el-col>
            <el-col :span="16" class="title">
              <div class="title-two">图片播放</div>
              <div class="number">
                <count-to :start-val="0" :end-val="adData.pic" :duration="1000" class="card-panel-num" />
                <span class="unit">次</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="12" class="card-panel-col">
        <div class="card-panel">
          <el-row :gutter="40">
            <el-col :span="8">
              <svg-icon icon-class="video" class-name="card-panel-icon" />
            </el-col>
            <el-col :span="16" class="title">
              <div class="title-two">视频播放</div>
              <div class="number">
                <count-to :start-val="0" :end-val="adData.video" :duration="1000" class="card-panel-num" />
                <span class="unit">次</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="12" class="card-panel-col">
        <div class="card-panel">
          <el-row :gutter="40">
            <el-col :span="8">
              <svg-icon icon-class="ad" class-name="card-panel-icon" />
            </el-col>
            <el-col :span="16" class="title">
              <div class="title-two">渠道广告</div>
              <div class="number">
                <count-to :start-val="0" :end-val="adData.platformChannel" :duration="1000" class="card-panel-num" />
                <span class="unit">次</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="12" class="card-panel-col">
        <div class="card-panel">
          <el-row :gutter="40">
            <el-col :span="8">
              <svg-icon icon-class="merchant" class-name="card-panel-icon" />
            </el-col>
            <el-col :span="16" class="title">
              <div class="title-two">商户广告</div>
              <div class="number">
                <count-to :start-val="0" :end-val="adData.platformBusiness" :duration="1000" class="card-panel-num" />
                <span class="unit">次</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="12" class="card-panel-col">
        <div class="card-panel">
          <el-row :gutter="40">
            <el-col :span="8">
              <svg-icon icon-class="ad" class-name="card-panel-icon" />
            </el-col>
            <el-col :span="16" class="title">
              <div class="title-two">渠道广告</div>
              <div class="number">
                <count-to :start-val="0" :end-val="adData.platformChannel" :duration="1000" class="card-panel-num" />
                <span class="unit">次</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="12" class="card-panel-col">
        <div class="card-panel">
          <el-row :gutter="40">
            <el-col :span="8">
              <svg-icon icon-class="merchant" class-name="card-panel-icon" />
            </el-col>
            <el-col :span="16" class="title">
              <div class="title-two">商户广告</div>
              <div class="number">
                <count-to :start-val="0" :end-val="adData.platformBusiness" :duration="1000" class="card-panel-num" />
                <span class="unit">次</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="card-panel" style="height: 80px;margin-bottom:20px;">
          <div style="margin: 22px auto;width: 220px;text-align: center">
            <div style="width: 20%">
              <svg-icon icon-class="earnings" style="float: left;font-size: 30px;color: #00a0dc;margin-top: 5px" />
            </div>
            <div class="number" style="color: red;float: left;margin-left: 40px">
              <span style="font-size: 12px;color: #9e9e9e">预计收益:</span>
              <!--<svg-icon icon-class="money" style="font-size: 8px"/>-->
              <count-to :start-val="0.01" :end-val="income" :duration="1000" class="card-panel-num" :decimals="2" />
              <span style="color: #9e9e9e;font-size: 12px">CPM</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--
  <div style="margin: 10px auto;width: 400px">
    <span style="color: rgba(138,134,134,0.89)">展示数量:&nbsp</span>  <el-input-number v-model="showNum" @change="query" :min="3" :max="90" label="展示数量" style="width: 150px" ></el-input-number>
    <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">{{ $t('table.export') }}</el-button>

  </div>
  <el-row :gutter="20" style="margin-bottom:20px;" v-loading="listLoadingPanel" >
    <el-col v-for="(item,index) in adData.adSlotIdInfos" :key="item.adSlotId" :span="8" style="margin-bottom: 10px">
      <el-row class="play-top">
        <el-col :span="2" class="index">
          {{index+1}}
        </el-col>
        <el-col :span="22">
          <div>广告ID:&nbsp;<span>{{item.adSlotId}}</span></div>
          <div>成功播放次数:&nbsp;<span style="color: #0073a1">{{item.successCount}}</span></div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <div>
    <div class="filter-container" style="margin-top: 30px">
    <el-input placeholder="商户名称" v-model="listQuery.merchantName" style="width: 90px;" class="filter-item" @keyup.enter.native="handleFilter"/>
    <el-input placeholder="次数" v-model="listQuery.countStart" style="width: 90px;" class="filter-item" @keyup.enter.native="handleFilter"/>
    <el-input placeholder="SN" v-model="listQuery.deviceSn" style="width: 90px;" class="filter-item" @keyup.enter.native="handleFilter"/>
    <el-input placeholder="MAC" v-model="listQuery.mac" style="width: 90px;" class="filter-item" @keyup.enter.native="handleFilter"/>
    <el-input placeholder="省" v-model="listQuery.province" style="width: 90px;" class="filter-item" @keyup.enter.native="handleFilter"/>
    <el-input placeholder="市" v-model="listQuery.city" style="width: 90px;" class="filter-item" @keyup.enter.native="handleFilter"/>
    <el-input placeholder="设备类型" v-model="listQuery.merchantType" style="width: 90px;" class="filter-item" @keyup.enter.native="handleFilter"/>
    <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
  </div>
  <el-table
    v-loading="listLoading"
    :key="tableKey"
    :data="list"
    border
    fit
    highlight-current-row
    style="width: 100%;"
  >
    <el-table-column
      label="名次"
      type="index"
      width="50"
      align="center">
    </el-table-column>
    <el-table-column label="商户名" align="center" width="150">
      <template slot-scope="scope">
        <span>{{ scope.row.merchantName }}</span>
      </template>
    </el-table-column>
    <el-table-column label="MAC" align="center" width="150">
      <template slot-scope="scope">
        <span>{{ scope.row.mac }}</span>
      </template>
    </el-table-column>
    <el-table-column label="SN" prop="id" align="center" width="150">
      <template slot-scope="scope">
        <span>{{ scope.row.deviceSn }}</span>
      </template>
    </el-table-column>
    <el-table-column label="次数" prop="id" align="center" width="100">
      <template slot-scope="scope">
        <span>{{ scope.row.count }}</span>
      </template>
    </el-table-column>
    <el-table-column label="时间" prop="id" align="center" width="200">
      <template slot-scope="scope">
        <span>{{standardStartTime}}至{{standardEndTime}}</span>
      </template>
    </el-table-column>
    <el-table-column label="地区(市)" prop="id" align="center" width="150">
      <template slot-scope="scope">
        <span>{{ scope.row.city }}</span>
      </template>
    </el-table-column>
    <el-table-column label="设备类型" prop="id" align="center" width="150">
      <template slot-scope="scope">
        <span>{{ scope.row.deviceModel }}</span>
      </template>
    </el-table-column>
  </el-table>
  <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize" @pagination="queryTable"/>
  -->
  </div>
  </div>
</template>
<script>
  import CountTo from 'vue-count-to'
  import {formatTime} from "@/utils/time";
  import {getAdDate, getAdTable, downLoadTable, downLoadPlays} from "@/api/advertisement";
  import Pagination from '@/components/Pagination'
  import waves from '@/directive/waves'

  const calendarTypeOptions = [
    {key: 'CN', display_name: 'China'},
    {key: 'US', display_name: 'USA'},
    {key: 'JP', display_name: 'Japan'},
    {key: 'EU', display_name: 'Eurozone'}
  ]
  const TIMELIMIT = 15
  // arr to obj ,such as { CN : "China", US : "USA" }
  const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
    acc[cur.key] = cur.display_name
    return acc
  }, {})
  export default {
    components: {
      CountTo, Pagination
    },
    data() {
      return {
        diyTime: true,
        timeLimit: TIMELIMIT,
        adData: {},
        startTime: new Date(new Date().toLocaleDateString()).getTime(),
        endTime: new Date().getTime(),
        tableKey: 0,
        list: null,
        total: 0,
        selectedTime: [],
        listLoading: false,
        listLoadingPanel: false,
        listQuery: {
          pageIndex: 1,
          pageSize: 20,
          countStart: undefined,
          merchantName: undefined,
          merchantType: undefined,
          deviceSn: undefined,
          mac: undefined,
          province: undefined,
          city: undefined,
          merchantType: undefined,
          startTime: undefined,
          endTime: undefined
        },
        calendarTypeOptions,
        downloadLoading: false,
        timeDelay: TIMELIMIT,
        adSlotIdNum: 10,
        refreshTime: undefined,
        showNum:12
      }
    },
    directives: {waves},
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'info',
          deleted: 'danger'
        }
        return statusMap[status]
      },
      typeFilter(type) {
        return calendarTypeKeyValue[type]
      }
    },
    methods: {
      getTime(type) {
        this.diyTime = true
        let mydate = new Date()
        if (type === '01') {
          this.startTime = new Date(new Date().toLocaleDateString()).getTime()
        } else if (type === '02') {
          let weekday = new Date().getDay() || 7;
          this.startTime = new Date().setDate(new Date().getDate() - weekday + 1) - mydate.getHours() * 3600000 - mydate.getMinutes() * 60000 - mydate.getSeconds() * 1000;
        } else if (type === '03') {
          this.startTime = new Date().setDate(1) - mydate.getHours() * 3600000 - mydate.getMinutes() * 60000 - mydate.getSeconds() * 1000
        }
        this.endTime = new Date().getTime()
        this.query()
        this.queryTable()
      },
      timeChange(val) {
        this.startTime = new Date(val[0]).getTime()
        this.endTime = new Date(val[1]).getTime()
        this.query()
        this.queryTable()
      },
      query() {
        //this.listLoadingPanel = true
        this.selectedTime = [this.startTime, this.endTime]
        let date = new Date;
        let queryTime = {
          "startTime": this.startTime,
          "endTime": this.endTime,
          "month": date.getMonth() + 1,
          "adSlotIdNum": this.showNum,
          "timeStamp": new Date(date).getTime()
        }
        console.log(queryTime)
        getAdDate(queryTime).then(response => {
          this.adData = response.data.data.data
          this.listLoadingPanel = false
          if (this.refreshTime !== undefined) {
            clearTimeout(this.refreshTime)
            console.log('1')
          }
          this.refreshTime = setTimeout(() => {
            this.endTime = new Date().getTime()
            this.query()
          }, this.timeDelay * 1000)
        })
      },
      queryTable() {
        //this.listLoading = true
        this.listQuery.startTime = this.startTime
        this.listQuery.endTime = this.endTime
        getAdTable(this.listQuery).then(response => {
          this.list = response.data.data.data
          this.listLoading = false;
          this.total = response.data.data.rowCount
        })
      },
      handleFilter() {
        this.listQuery.pageIndex = 1
        this.queryTable()

      },
      reSetInterval() {
        if (this.timeDelay >= this.timeLimit) {
          clearTimeout(this.refreshTime)
          this.refreshTime = setTimeout(() => {
            this.query()
          }, this.timeDelay * 1000)
        } else {
          if (this.timeDelay - 0 === 0) {
            clearTimeout(this.refreshTime)
            return
          }
          this.$message({
            message: "时间不得少于" + this.timeLimit + "秒",
            type: 'warning'
          });
          this.timeDelay = this.timeLimit
        }

      },
      handleDownload() {
        //this.downloadLoading = true
        {
          let queryTime = {"startTime": new Date(this.startTime).getTime(), "endTime": new Date(this.endTime).getTime()}
          downLoadTable(queryTime).then(response => {
            this.downloadLoading = false
          })
        }
      },
    },
    computed: {
      successRate: function () {
        if (this.adData.playTotalCount === 0) {
          return 0
        }
        return (100 - (this.adData.playFail * 100 / this.adData.playTotalCount))
      },
      income: function () {
        return (this.adData.playSuccess / 100)
      },
      standardStartTime: function () {
        return formatTime(new Date(this.startTime), 'yyyy-MM-dd')
      },
      standardEndTime: function () {
        return formatTime(new Date(this.endTime), 'yyyy-MM-dd')
      }
    },
    mounted() {
    },
    created() {
      this.query()
      this.queryTable()

    },
    destroyed(){
      clearTimeout(this.refreshTime)
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }

    .date-btn {
      margin: -20px auto 10px auto;
      width: 100%;
      background-color: white;
      padding: 7px;
    }

    .panel-group {

      .card-panel-col {
        margin-bottom: 12px;
      }

      .card-panel {
        height: 110px;
        cursor: pointer;
        font-size: 12px;
        position: relative;
        overflow: hidden;
        color: #9e9e9e;
        background: #fff;
        box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
        border-color: rgba(0, 0, 0, .05);


        .card-panel-icon {
          float: right;
          font-size: 48px;
          margin-top: 31px;
          color: #00a0dc;
        }
      }

      .card-panel:hover {
        cursor: default;
        // box-shadow: 5px 6px rgba(0, 0, 0, 0.09);
        //  transform: translate(0, -2px);
      }

      .title {
        font-size: 13px;
        padding: 20px
      }

      .title-two {
        padding-top: 10px;
      }

      .number {
        font-size: 18px;
        padding: 10px 0;
        color: #409fff;
        font-weight: bold;
      }

      .unit {
        font-size: 13px
      }
    }

    .play-top {
      background-color: white;
      color: #9e9e9e;

      .index {
        color: #008ec6;
        line-height: 70px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
      }

      div {
        padding: 10px 5px;
      }
    }
  }
</style>
